<!-- 材料订单编辑弹窗 -->
<template>
  <div class="ele-body">
    <a-card :bordered="false">
    <a-form
        ref="form2"
        :model="materialOrderModalApp.materialOrder"
        :rules="materialOrderModalApp.rules"
        :label-col="{md: {span: 15}, sm: {span: 24}}"
        :wrapper-col="{md: {span: 9}, sm: {span: 24}}">
        <a-row :gutter="16">

<!--          <a-col :lg="6" :md="12" :sm="24" :xs="24">-->
<!--            <a-form-item label="供应原材料id:" name="supplyMaterialId">-->
<!--              <a-input-number-->
<!--                v-model:value="materialOrderModalApp.materialOrder.supplyMaterialId"-->
<!--                placeholder="请输入供应原材料id"-->
<!--                :min="0"-->
<!--                :step="1"-->
<!--                class="ele-fluid"-->
<!--              ></a-input-number>-->
<!--            </a-form-item>-->
<!--          </a-col>-->

          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="订单名称:" name="name">
              <a-input
                v-model:value="materialOrderModalApp.materialOrder.name"
                placeholder="请输入订单名称"
                class="ele-fluid"
              ></a-input>
            </a-form-item>
          </a-col>

          <a-col :lg="12" :md="12" :sm="24" :xs="24">
            <a-form-item label="备注:" name="remark">
              <a-input
                v-model:value="materialOrderModalApp.materialOrder.remark"
                placeholder="备注"
                class="ele-fluid"></a-input>
            </a-form-item>
          </a-col>

<!--          <a-col :lg="6" :md="12" :sm="24" :xs="24">-->
<!--            <a-form-item label="是否合格:" name="qualified">-->
<!--              <a-switch-->
<!--                v-if="materialOrderModalApp.materialOrder.qualified"-->
<!--                v-model:value="materialOrderModalApp.materialOrder.qualified"-->
<!--                defaultChecked-->
<!--                @change="onqualifiedChange"-->
<!--              />-->
<!--              <a-switch-->
<!--                v-if="!materialOrderModalApp.materialOrder.qualified"-->
<!--                v-model:value="materialOrderModalApp.materialOrder.qualified"-->
<!--                @change="onqualifiedChange"-->
<!--              />-->
<!--            </a-form-item>-->
<!--          </a-col>-->


          <a-col :md="12" :sm="24" :xs="24">
            <a-form-item :wrapper-col="{md: {offset: 6}}" style="margin-bottom: -20px">
              <!--class="ele-pull-right"-->
              <div v-if="materialOrderModalApp.display">
                <teleport to="#materialOrderEditModalFooter">
                  <div>
                    <a-space size="middle">
                      <a-button @click="materialOrderListApp.editModalShowing=false">取消
                      </a-button>
                      <a-button
                        type="primary"
                        @click="onSubmit(materialOrderModalApp.materialOrder)"
                        :loading="loading">提交
                      </a-button>
                      <!--<a-button v-if="!eid"
                                type="dashed"
                                @click="continueSubmit"
                                :loading="loading">继续提交
                      </a-button>-->
                    </a-space>
                  </div>
                </teleport>
              </div>
              <div v-if="!materialOrderModalApp.display">
                <a-space size="middle">
                  <a-button @click="onBack()">返回列表</a-button>
                  <a-button
                    type="primary"
                    @click="onSubmit(materialOrderModalApp.materialOrder)"
                    :loading="loading">提交
                  </a-button>
                  <!--<a-button v-if="!eid"
                            type="dashed"
                            @click="continueSubmit"
                            :loading="loading">继续提交
                  </a-button>-->
                </a-space>
              </div>

            </a-form-item>
          </a-col>
        </a-row>
      <MOrderMaterialRelationMannage
        style="margin: 10px 0"
        :is-detail="materialOrderListApp.viewModalShowing"
        height="350"
        ref="orderMaterialRelationForm"
        :materialOrderId="businessId"></MOrderMaterialRelationMannage>
      </a-form>
    </a-card>

  </div>

</template>

<script>
import {defineComponent, inject, reactive, onMounted, ref, toRefs} from 'vue'
import {useRoute} from "vue-router"
import {MaterialOrderService} from "@/views/restaurant/material/materialOrder/materialOrderService";
import {VXETable} from 'vxe-table'
// import {useStore} from "vuex";
import regions from 'ele-admin-pro/packages/regions.js';
import MOrderMaterialRelationMannage from "@/components/MOrderMaterialRelationMannage";


export default defineComponent({
  components: {MOrderMaterialRelationMannage},
  props: {
    editId: String
  },
  setup(props) {
    // 省市区数据
    const businessId = toRefs(props).editId.value

    const cityData = regions
    const route = useRoute();
    // const router = useRouter();
    // const store = useStore();
    let routeId = route.params.id;
    let materialOrderListApp = inject('materialOrderListApp', reactive({}));
    let materialOrderGrid = inject('materialOrderGrid',reactive({}));
    let orderMaterialRelationForm = ref({});
    const materialOrderModalApp = reactive({
      id: null,
      materialOrder: {},
      supplyMaterialName:null,
      isEdit: false,
      display: false
    });
    materialOrderModalApp.rules = {
      supplyMaterialId: [
        {
          required: false,
          type: 'number',
          message: '请输入供应原材料id',
          trigger: 'blur'
        }
      ],
      supplyMaterialName: [
        {
          required: true,
          type: 'string',
          message: '请输入供应原材料名称',
          trigger: 'blur'
        }
      ],
      supplyNum: [
        {
          required: true,
          type: 'number',
          message: '请输入供货数量',
          trigger: 'blur'
        }
      ],

    }

    onMounted(() => {
      //清理数据
      materialOrderModalApp.materialOrder = reactive({});
      if (routeId) {//路由
        materialOrderModalApp.id = routeId;
        materialOrderModalApp.display = false;
        findMaterialOrder(materialOrderModalApp.id);
      } else if (materialOrderListApp.editModalForEdit) {//修改弹窗
        materialOrderModalApp.id = materialOrderListApp.currentId;
        materialOrderModalApp.display = true;
      } else if (!materialOrderListApp.editModalForEdit && materialOrderListApp.addModalForEdit) {//新增弹窗
        materialOrderModalApp.display = true;
      } else {
        materialOrderModalApp.title = "新增订单";
      }
      if (materialOrderModalApp.id) findMaterialOrder(materialOrderModalApp.id);
    })

    const findMaterialOrder = (id) => {
      MaterialOrderService.findMaterialOrderForView(id).then((res) => {
        materialOrderModalApp.materialOrder = res.data;
        //TODO:为编辑准备.
        materialOrderModalApp.title = "编辑订单 " + materialOrderModalApp.materialOrder.name;
      }).catch(error => {
        VXETable.modal.message({content: `查找订单出错，原因是：${error.message}`, status: 'error'});
      })
    }

    /*TODO:提交 新增&编辑*/
    const onSubmit = (data) => {
      let orderMaterialRelationList = orderMaterialRelationForm.value.getOrderMaterialRelationList()
      console.log(orderMaterialRelationList)

      console.log(data)
      // debugger;
      //当为数组时用逗号连接
      if (data.eid) {
        //修改
        //修改订单材料关系
        MaterialOrderService.updateOrderMaterialRelation(orderMaterialRelationList).then((res)=>{
          console.log(res)
          VXETable.modal.message({content: '更新关系操作成功', status: 'success'});
            setTimeout(onBack, 3000);
          }).catch(error => {
            VXETable.modal.message({content: `更新关系错误，原因是：${error.message}`, status: 'error'});
          })
        //修改订单
        MaterialOrderService.updateMaterialOrder(data).then((res) => {
          console.log(res);
          VXETable.modal.message({content: '操作成功', status: 'success'});
          setTimeout(onBack, 3000);
        }).catch(error => {
          VXETable.modal.message({content: `系统错误，原因是：${error.message}`, status: 'error'});
        })
      } else {
        //新增
        //修改订单材料关系
        MaterialOrderService.saveOrderMaterialRelation(orderMaterialRelationList).then((res)=>{
          console.log(res)
          VXETable.modal.message({content: '更新关系操作成功', status: 'success'});
          setTimeout(onBack, 3000);
        }).catch(error => {
          VXETable.modal.message({content: `更新关系错误，原因是：${error.message}`, status: 'error'});
        })
        MaterialOrderService.saveMaterialOrder(data).then((res) => {
          console.log(res);
          VXETable.modal.message({content: '操作成功', status: 'success'});
          setTimeout(onBack, 3000);
        }).catch(error => {
          VXETable.modal.message({content: `系统错误，原因是：${error.message}`, status: 'error'});
        })
      }
    }

    /*TODO:继续提交*/
    const continueSubmit = () => {
      VXETable.modal.message({content: 'error 提示', status: 'error'});
    }

    /*TODO:返回列表*/
    const onBack = () => {
      // router.push(`/restaurant/material/materialOrder`);
      // store.dispatch('user/tabRemove', route.fullPath);
      materialOrderListApp.editModalShowing=false
      materialOrderGrid.value.commitProxy('query')

    }
    /*TODO:是否合格 开关改变事件*/
    const onqualifiedChange = () => {
      materialOrderModalApp.materialOrder.qualified = !materialOrderModalApp.materialOrder.qualified;
    }
    return {
      cityData,
      businessId,
      routeId,
      materialOrderListApp,
      materialOrderModalApp,
      orderMaterialRelationForm,
      onSubmit,
      continueSubmit,
      onBack,
      onqualifiedChange,
    }

  },
})
</script>

<style scoped>

</style>
